
<!DOCTYPE html>
<html lang="zh-CN" style="font-size:100px">
<head>
    <meta charset="utf-8"/>
    <meta name="viewport"
          content="width=device-width,initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0,user-scalable=no"/>
    <title>首页</title>
    <link href="styles/styles.css" rel="stylesheet">
    <script src="http://apps.bdimg.com/libs/jquery/1.10.2/jquery.min.js"></script>
    <script type="text/javascript">
        var scaleNum=window.screen.width/750;
        document.getElementsByTagName('html')[0].style.fontSize=(100*scaleNum)+'px';

        $(function(){
            var width=$(".yuan" ).css('width');
            $(".yuan" ).css({'height':width,'border-radius':width});
            $(".yuan" ).css({'border-top-left-radius':width,'border-top-right-radius':width,'border-bottom-right-radius':width,'border-bottom-left-radius':width});
            $(".yuan" ).css({'height':width,'border-radius':width});
            var high=true;
            $('.south' ).click(function(){
                if(high){
                    high=false
                    closeHigh()
                }else{
                    high=true;
                    showHigh();
                }
            })

            closeHigh();
            var tag=true;
            $(".bg-mohu" ).hide();

            var west_lock_status=true;
            var east_lock_status=true;
            $(".west" ).click(function(){
                if(west_lock_status)
                {
                    west_lock_status=false;
                    $(this ).find('.low-show' ).hide();
                    $(this ).find('.high-show' ).fadeIn();

                }else{
                    west_lock_status=true;
                    $(this ).find('.high-show' ).hide();
                    $(this ).find('.low-show' ).fadeIn();

                }
            })
            $(".east" ).click(function(){
                if(east_lock_status)
                {
                    east_lock_status=false;
                    $(this ).find('.low-show' ).hide();
                    $(this ).find('.high-show' ).fadeIn();

                }else{
                    east_lock_status=true;
                    $(this ).find('.high-show' ).hide();
                    $(this ).find('.low-show' ).fadeIn();

                }
            })
            $(".choose-lock" ).click(function(){
                if(tag){
                    tag=false
                    $(".bg-mohu" ).css({'width':window.screen.width,'height':window.screen.height}).fadeIn();
                    $(".left-text" ).show();
                    $(".left-nav" ).animate({
                        width:'55%'
                    }, 500);
                    $(this ).css({'position': 'absolute','left':'1rem'});
                    $(this ).animate({
                        position:'absolute',
                        left:'4.8rem'
                    }, 500);
                }else{
                    tag=true;
                    $(".bg-mohu" ).fadeOut();
                    $(".left-text" ).hide();
                    $(".left-nav" ).animate({
                        width:'0%'
                    }, 500);
                    $(this ).css({'position': 'relative'});
                    $(this ).animate({
                        left:'0rem'
                    }, 500);
                }

            })

            $(".select li" ).click(function(){
                $(this ).addClass('selected' ).siblings('li' ).removeClass('selected');
            })

        })
        function showHigh(){$(".high-show" ).show();$('.low-show' ).hide();}
        function closeHigh(){$(".high-show" ).hide();$('.low-show' ).show();}


    </script>
</head>
<body>
    <div class="pageWp">
        <div class="top">
            <header class="header_nav">
                    <a href="javascript:void(0);" onclick="window.history.go(-1)" class="btn_back">
                        返回
                    </a>
                    <span class="line">&nbsp;</span>
                    <div class="logo_nav">
                        卫巢
                    </div>
                    <div class="list_nav">
                        列表
                    </div>
            </header>
        </div>
        <section class="main">
            <div class="title">
                <div class="title-english">WELCOME TO WANCHAOAN</div>
                <div class="title-chinese">欢迎使用卫巢密<sup>®</sup>密锁</div>
            </div>
            <div>
                <div class="yuan">
                    <div class="north">
                        <img class="high-show" src="images/logo_high.png">
                        <img class="low-show" src="images/logo_low.png">
                    </div>
                    <div class="west">
                        <img class="high-show" style="display: none;" src="images/lock_high.png">
                        <img class="low-show" src="images/lock_low.png">
                    </div>
                    <div class="center"><span class="high-show">已连接</span><span class="low-show">未连接</span></div>
                    <div class="east">
                        <img class="high-show" style="display: none;" src="images/unlock_high.png">
                        <img class="low-show" src="images/unlock_low.png">
                    </div>
                    <div class="south">画布<br/><span style="font-size: 0.05rem;">64px*48px</span></div>
                </div>
            </div>
            <div class="log-box">
                <div class="title">
                    <div class="title3_inner">操作日志</div>
                </div>
                <div class="item">
                    <ul class="list">
                        <li>欢迎使用卫巢密锁<span>2016.5.29</span></li>
                        <li>欢迎使用卫巢密<span>2016.5.22</span></li>
                        <li>欢迎使用卫巢密<span>2016.5.22</span></li>
                        <li>欢迎使用卫巢密锁<span>2016.5.22</span></li>
                        <li>欢迎使用卫巢密<span>2016.5.22</span></li>
                        <li>欢迎使用卫巢密<span>2016.5.22</span></li>
                        <li>欢迎使用卫巢密锁<span>2016.5.22</span></li>
                        <li>欢迎使用卫巢密<span>2016.5.22</span></li>
                        <li>欢迎使用卫巢密<span>2016.5.22</span></li>
                    </ul>
                </div>
            </div>
        </section>
        <div style="height: 1.5rem;"></div>
        <img class="bg-mohu" src="images/bg_mohu.png">
        <footer>
            <div class="footer">
                <div class="choose-lock">选锁</div>
                <div class="choose-title">卫巢密锁128K-154</div>
            </div>
        </footer>

        <div class="left-nav">
            <div class="log-box left-text">
                <div class="title">
                    <div class="title3_inner">附近的密锁</div>
                </div>
                <div>
                    <ul class="select">
                        <li class="selected">欢迎使用卫巢密锁</li>
                        <li>欢迎使用卫巢密</li>
                        <li>欢迎使用卫巢密</li>
                        <li>欢迎使用卫巢密锁</li>
                        <li>欢迎使用卫巢密锁</li>
                        <li>欢迎使用卫巢密</li>
                        <li class="disabled">欢迎使用卫巢密</li>
                        <li class="disabled">欢迎使用卫巢密锁</li>
                    </ul>
                </div>
            </div>
        </div>
    </div>
</body>
</html>
